<template>
    <div class="box">
        <heads title="首页"></heads>
        <van-pull-refresh v-model="loading" @refresh="onRefresh">
            <van-tabs v-model:active="active">
                <van-tab title="标签 1">
                    <!-- <van-search v-model="value" disabled placeholder="请输入搜索关键词" /> -->
                    <div style="display: flex;align-items: center;">
                        <search></search>
                        <router-link to="/home/list"> <van-icon size="3rem" name="like-o" /></router-link>
                    </div>
                    <swiper :list="list"></swiper>
                    <van-grid :border="false" :column-num="4">
                        <van-grid-item v-for="(v, i) in navlist" :key="i">
                            <van-image
                                :src="v.image_src ? v.image_src : 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'" />
                        </van-grid-item>
                    </van-grid>

                    <van-grid :border="false" :column-num="2">
                        <van-grid-item v-for="(v, i) in aalist" :key="i"
                            :style="i % 2 == 0 ? 'height:19rem' : 'height:26rem'" @click="xiang()">
                            <van-image
                                :src="v.goods_small_logo ? v.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'" />
                            <p>{{ v.goods_name }}</p>
                        </van-grid-item>
                    </van-grid>

                    <van-floating-bubble v-model:offset="offset" axis="xy" icon="chat"
                        style="width: 90%;background-color: rgba(255, 0, 255, 0.8);" v-if="hide">
                        <router-link to="/login">新用户福利</router-link>
                        <p @click="aaFun">X</p>
                    </van-floating-bubble>

                </van-tab>
                <van-tab title="标签 2">内容 2</van-tab>
                <van-tab title="标签 3">内容 3</van-tab>
                <van-tab title="标签 4">内容 4</van-tab>
            </van-tabs>
        </van-pull-refresh>

    </div>
</template>

<script setup>
import { ref } from "vue"
const offset = ref({ x: 20, y: 500 });
import { showToast } from 'vant';
import search from "@/components/search.vue";
import swiper from "@/components/swiper.vue";
import { swiperdataApi, catitemsApi, searchApi } from "@/api/api"
import heads from '@/components/head.vue';
let list = ref('')
const aa = () => {
    swiperdataApi().then(res => {
        list.value = res.data.message
    })
}
aa()


let navlist = ref('')
const bb = () => {
    catitemsApi().then(res => {
        navlist.value = res.data.message
    })
}
bb()

let aalist = ref('')
const cc = () => {
    searchApi().then(res => {
        aalist.value = res.data.message.goods
    })
}
cc()

let hide = ref(true)
const aaFun = () => {
    hide.value = false

}

const loading = ref(false);
const onRefresh = () => {
    setTimeout(() => {
        showToast('刷新成功');
        loading.value = false;
        aa()
        bb()
        cc()
    }, 1000);
};

import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
const xiang = () => {
    //    router.push({path:'/detail',query:{goods_id:goods_id	}})
    router.push('/detail')
}
</script>

<style lang="scss" scoped>
.box {
    overflow: auto;
}
</style>